<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/progressbar/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleContextualProgressBars">
			<div class="m-section">
				<div class="m-section__content">
					<p>
						<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>
					</p>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleProgressBarsWithCurrentValueLabels">
			<div class="m-section">
				<div class="m-section__content">
					<p>
						<ngb-progressbar showValue="true" type="success" [value]="25" [max]="100"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar [showValue]="true" type="info" [value]="50" [max]="100"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar>
					</p>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleStripedProgressBars">
			<div class="m-section">
				<div class="m-section__content">
					<p>
						<ngb-progressbar type="success" [value]="25" [striped]="true"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="info" [value]="50" [striped]="true"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="warning" [value]="75" [striped]="true"></ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="danger" [value]="100" [striped]="true"></ngb-progressbar>
					</p>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleProgressBarsWithCustomLabels">
			<div class="m-section">
				<div class="m-section__content">
					<p>
						<ngb-progressbar type="success" [value]="25">25</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="info" [value]="50">Copying file
							<b>2 of 4</b>...</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true">
							<i>50%</i>
						</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="danger" [value]="100" [striped]="true">Completed!</ngb-progressbar>
					</p>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleProgressBarsWithHeight">
			<div class="m-section">
				<div class="m-section__content">
					<p>
						<ngb-progressbar type="success" [value]="25">default</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar>
					</p>
					<p>
						<ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar>
					</p>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfProgressBars">
			<div class="m-section">
				<div class="m-section__content">
					<p>This progress bar uses the customized default values.</p>
					<p>
						<ngb-progressbar value="250" max="1000" striped="true" animated="true" height="20px" type="success"></ngb-progressbar>
					</p>
					<p>This progress bar uses the customized default values, but changes the type using an input.</p>
					<p>
						<ngb-progressbar value="500" max="1000" striped="true" animated="true" height="20px" type="info"></ngb-progressbar>
					</p>
					
				</div>
			</div>
		</m-material-preview>
	</div>
</div>